<%-- 
    Document   : index
    Created on : 26/05/2012, 10:33:03
    Author     : Daniel Lucas
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Compre sua Passagem Aérea</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Site de LPBD">
        <meta name="author" content="Daniel Lucas">
        <!-- Le styles -->
        <link href="http://www.eyecon.ro/bootstrap-datepicker/css/bootstrap.css" rel="stylesheet">
        <link href="http://www.eyecon.ro/bootstrap-datepicker/css/datepicker.css" rel="stylesheet">
        <link href="http://www.eyecon.ro/bootstrap-datepicker/js/google-code-prettify/prettify.css" rel="stylesheet">
        <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
        <!--[if lt IE 9]>
          <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->

        <link href="resources/css/bootstrap.css" rel="stylesheet">
        <link href="resources/css/bootstrap-responsive.css" rel="stylesheet">
        <link href="resources/css/datepicker.css" rel="stylesheet">
        <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
          <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <!-- Le fav and touch icons -->     
    </head>
    <body>

        <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container-fluid">
                    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </a>
                    <a class="brand" href="#"> VoeFácil 1.0</a>

                    <div class="nav-collapse">
                        <ul class="nav">
                            <li><a href="#home">Home</a></li>
                            <li><a href="empresa.jsp">Quem Somos</a></li>
                            <li><a href="cancela.jsp">Cancelar Passagem</a></li>
                            <li><a href="contato.jsp">Contato</a></li>
                            <li><a href="Criadores.jsp">Desenvolvedores</a></li>
                        </ul>
                    </div><!--/.nav-collapse -->
                </div>
            </div>
        </div>

        <div class="container-fluid">
            <div class="row">
                <div class="span3">
                    <div class="well sidebar-nav">
                        <ul class="nav nav-list">
                            <li class="nav-header">____________________</li>
                            <li class="nav-header">Menu</li>
                            <li><a href="empresa.jsp">Quem Somos</a></li>
                            <li><a href="cancela.jsp">Cancelar Passagem</a></li>
                            <li><a href="contato.jsp">Contato</a></li>

                        </ul>
                    </div><!--/.well -->
                </div><!--/span-->

                <div class="container">
                    <div class="row">
                        <div class="span8">
                            <div class="alert alert-success">
                                Lembre-se de apresentar seus documentos originais na hora do embarque!
                            </div>
                            <form name="form1" class="form-horizontal" id="registerHere" method='get' action='CompraPassagem.jsp' onSubmit="return verificacao()">
                                <fieldset class="well" style="width: 500px;background-color: azure">
                                    <legend><b style="padding-top: 10px">Comprar Passagem</b></legend>
                                    <div class="control-group">

                                    </div>
                                    <div class="control-group">
                                        <label class="control-label" for="cidade_origem">Cidade de Origem</label>
                                        <div class="controls">
                                            <input type="text" class="input-xlarge" id="cidade_origem" name="origem" rel="popover" data-content="Digite a cidade de origem." data-original-title="Cidade de Origem" placeholder="cidade de origem...">
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label class="control-label" for="data">Data de Ida</label>
                                        <div class="controls">                                            
                                                <div class="input-append date" id="dp3" data-date="01-07-2012" data-date-format="dd-mm-yyyy">
                                                    <input class="span2" size="16" type="text" id="data" name="data" value="01-07-2012" readonly="">
                                                    <span class="add-on">Procurar<i class="icon-th"></i></span>
                                                </div>
                                            
                                            <script src="./Datepicker for Bootstrap, from Twitter_files/prettify.js"></script>
                                            <script src="./Datepicker for Bootstrap, from Twitter_files/jquery.js"></script>
                                            <script src="./Datepicker for Bootstrap, from Twitter_files/bootstrap-datepicker.js"></script>
                                            <script>
                                                $(function(){
                                                    window.prettyPrint && prettyPrint();
                                                    $('#dp1').datepicker({
                                                        format: 'mm-dd-yyyy'
                                                    });
                                                    $('#dp2').datepicker();
                                                    $('#dp3').datepicker();


                                                    var startDate = new Date(2012,1,20);
                                                    var endDate = new Date(2012,1,25);
                                                    $('#dp4').datepicker()
                                                    .on('changeDate', function(ev){
                                                        if (ev.date.valueOf() > endDate.valueOf()){
                                                            $('#alert').show().find('strong').text('A data de início não pode ser maior que a data final');
                                                        } else {
                                                            $('#alert').hide();
                                                            startDate = new Date(ev.date);
                                                            $('#startDate').text($('#dp4').data('date'));
                                                        }
                                                        $('#dp4').datepicker('hide');
                                                    });
                                                    $('#dp5').datepicker()
                                                    .on('changeDate', function(ev){
                                                        if (ev.date.valueOf() < startDate.valueOf()){
                                                            $('#alert').show().find('strong').text('A data final não pode ser inferior a data de início');
                                                        } else {
                                                            $('#alert').hide();
                                                            endDate = new Date(ev.date);
                                                            $('#endDate').text($('#dp5').data('date'));
                                                        }
                                                        $('#dp5').datepicker('hide');
                                                    });
                                                });
                                            </script>
                                            <script src="./Datepicker for Bootstrap, from Twitter_files/urchin.js" type="text/javascript">
                                            </script>
                                            <script type="text/javascript">
                                                _uacct = "UA-106117-1";
                                                urchinTracker();
                                            </script>

                                            <div class="datepicker dropdown-menu"><div class="datepicker-days" style="display: block; "><table class=" table-condensed"><thead><tr><th class="prev"><i class="icon-arrow-left"></i></th><th colspan="5" class="switch">Fevereiro 2012</th><th class="next"><i class="icon-arrow-right"></i></th></tr><tr><th class="dow">Do</th><th class="dow">Sg</th><th class="dow">Te</th><th class="dow">Qa</th><th class="dow">Qi</th><th class="dow">Se</th><th class="dow">Sa</th></tr></thead><tbody><tr><td class="day old">29</td><td class="day old">30</td><td class="day old">31</td><td class="day">1</td><td class="day">2</td><td class="day">3</td><td class="day">4</td></tr><tr><td class="day">5</td><td class="day">6</td><td class="day">7</td><td class="day">8</td><td class="day">9</td><td class="day">10</td><td class="day">11</td></tr><tr><td class="day">12</td><td class="day">13</td><td class="day">14</td><td class="day">15</td><td class="day active">16</td><td class="day">17</td><td class="day">18</td></tr><tr><td class="day">19</td><td class="day">20</td><td class="day">21</td><td class="day">22</td><td class="day">23</td><td class="day">24</td><td class="day">25</td></tr><tr><td class="day">26</td><td class="day">27</td><td class="day">28</td><td class="day">29</td><td class="day new">1</td><td class="day new">2</td><td class="day new">3</td></tr><tr><td class="day new">4</td><td class="day new">5</td><td class="day new">6</td><td class="day new">7</td><td class="day new">8</td><td class="day new">9</td><td class="day new">10</td></tr></tbody></table></div><div class="datepicker-months" style="display: none; "><table class="table-condensed"><thead><tr><th class="prev"><i class="icon-arrow-left"></i></th><th colspan="5" class="switch">2012</th><th class="next"><i class="icon-arrow-right"></i></th></tr></thead><tbody><tr><td colspan="7"><span class="month">Jan</span><span class="month active">Fev</span><span class="month">Mar</span><span class="month">Abr</span><span class="month">Mai</span><span class="month">Jun</span><span class="month">Jul</span><span class="month">Ago</span><span class="month">Set</span><span class="month">Out</span><span class="month">Nov</span><span class="month">Dez</span></td></tr></tbody></table></div><div class="datepicker-years" style="display: none; "><table class="table-condensed"><thead><tr><th class="prev"><i class="icon-arrow-left"></i></th><th colspan="5" class="switch">2010-2019</th><th class="next"><i class="icon-arrow-right"></i></th></tr></thead><tbody><tr><td colspan="7"><span class="year old">2009</span><span class="year">2010</span><span class="year">2011</span><span class="year active">2012</span><span class="year">2013</span><span class="year">2014</span><span class="year">2015</span><span class="year">2016</span><span class="year">2017</span><span class="year">2018</span><span class="year">2019</span><span class="year old">2020</span></td></tr></tbody></table></div></div><div class="datepicker dropdown-menu"><div class="datepicker-days" style="display: block; "><table class=" table-condensed"><thead><tr><th class="prev"><i class="icon-arrow-left"></i></th><th colspan="5" class="switch">Fevereiro 2012</th><th class="next"><i class="icon-arrow-right"></i></th></tr><tr><th class="dow">Su</th><th class="dow">Mo</th><th class="dow">Tu</th><th class="dow">We</th><th class="dow">Th</th><th class="dow">Fr</th><th class="dow">Sa</th></tr></thead><tbody><tr><td class="day old">29</td><td class="day old">30</td><td class="day old">31</td><td class="day">1</td><td class="day">2</td><td class="day">3</td><td class="day">4</td></tr><tr><td class="day">5</td><td class="day">6</td><td class="day">7</td><td class="day">8</td><td class="day">9</td><td class="day">10</td><td class="day">11</td></tr><tr><td class="day">12</td><td class="day">13</td><td class="day">14</td><td class="day">15</td><td class="day active">16</td><td class="day">17</td><td class="day">18</td></tr><tr><td class="day">19</td><td class="day">20</td><td class="day">21</td><td class="day">22</td><td class="day">23</td><td class="day">24</td><td class="day">25</td></tr><tr><td class="day">26</td><td class="day">27</td><td class="day">28</td><td class="day">29</td><td class="day new">1</td><td class="day new">2</td><td class="day new">3</td></tr><tr><td class="day new">4</td><td class="day new">5</td><td class="day new">6</td><td class="day new">7</td><td class="day new">8</td><td class="day new">9</td><td class="day new">10</td></tr></tbody></table></div><div class="datepicker-months" style="display: none; "><table class="table-condensed"><thead><tr><th class="prev"><i class="icon-arrow-left"></i></th><th colspan="5" class="switch">2012</th><th class="next"><i class="icon-arrow-right"></i></th></tr></thead><tbody><tr><td colspan="7"><span class="month">Jan</span><span class="month active">Fev</span><span class="month">Mar</span><span class="month">Abr</span><span class="month">Mai</span><span class="month">Jun</span><span class="month">Jul</span><span class="month">Ago</span><span class="month">Set</span><span class="month">Out</span><span class="month">Nov</span><span class="month">Dez</span></td></tr></tbody></table></div><div class="datepicker-years" style="display: none; "><table class="table-condensed"><thead><tr><th class="prev"><i class="icon-arrow-left"></i></th><th colspan="5" class="switch">2010-2019</th><th class="next"><i class="icon-arrow-right"></i></th></tr></thead><tbody><tr><td colspan="7"><span class="year old">2009</span><span class="year">2010</span><span class="year">2011</span><span class="year active">2012</span><span class="year">2013</span><span class="year">2014</span><span class="year">2015</span><span class="year">2016</span><span class="year">2017</span><span class="year">2018</span><span class="year">2019</span><span class="year old">2020</span></td></tr></tbody></table></div></div><div class="datepicker dropdown-menu" style="top: 443px; left: 560px; display: none; "><div class="datepicker-days" style="display: block; "><table class=" table-condensed"><thead><tr><th class="prev"><i class="icon-arrow-left"></i></th><th colspan="5" class="switch">Fevereiro 2012</th><th class="next"><i class="icon-arrow-right"></i></th></tr><tr><th class="dow">Do</th><th class="dow">Sg</th><th class="dow">Te</th><th class="dow">Qa</th><th class="dow">Qi</th><th class="dow">Sx</th><th class="dow">Sa</th></tr></thead><tbody><tr><td class="day old">29</td><td class="day old">30</td><td class="day old">31</td><td class="day">1</td><td class="day">2</td><td class="day">3</td><td class="day">4</td></tr><tr>
                                                                <td class="day">5</td><td class="day">6</td><td class="day">7</td><td class="day">8</td><td class="day">9</td>
                                                                <td class="day">10</td><td class="day">11</td></tr><tr><td class="day active">12</td><td class="day">13</td>
                                                                <td class="day">14</td><td class="day">15</td><td class="day">16</td><td class="day">17</td><td class="day">18</td>
                                                            </tr><tr><td class="day">19</td><td class="day">20</td><td class="day">21</td><td class="day">22</td><td class="day">23</td><td class="day">24</td>
                                                                <td class="day">25</td></tr><tr><td class="day">26</td><td class="day">27</td><td class="day">28</td><td class="day">29</td><td class="day new">1</td>
                                                                <td class="day new">2</td><td class="day new">3</td></tr><tr><td class="day new">4</td><td class="day new">5</td><td class="day new">6</td>
                                                                <td class="day new">7</td><td class="day new">8</td><td class="day new">9</td><td class="day new">10</td></tr></tbody></table>
                                                </div><div class="datepicker-months" style="display: none; "><table class="table-condensed"><thead><tr><th class="prev">
                                                                    <i class="icon-arrow-left"></i></th><th colspan="5" class="switch">2012</th><th class="next"><i class="icon-arrow-right">
                                                                    </i></th></tr></thead><tbody><tr><td colspan="7"><span class="month">Jan</span><span class="month active">Fev</span>
                                                                    <span class="month">Mar</span><span class="month">Abr</span><span class="month">Mai</span><span class="month">Jun</span>
                                                                    <span class="month">Jul</span><span class="month">Ago</span><span class="month">Set</span><span class="month">Out</span>
                                                                    <span class="month">Nov</span><span class="month">Dez</span></td></tr></tbody></table></div><div class="datepicker-years" style="display: none; ">
                                                    <table class="table-condensed"><thead><tr><th class="prev"><i class="icon-arrow-left"></i></th><th colspan="5" class="switch">2010-2019</th>
                                                                <th class="next"><i class="icon-arrow-right"></i></th></tr></thead><tbody><tr><td colspan="7"><span class="year old">2009</span>
                                                                    <span class="year">2010</span><span class="year">2011</span><span class="year active">2012</span><span class="year">2013</span>
                                                                    <span class="year">2014</span><span class="year">2015</span><span class="year">2016</span><span class="year">2017</span>
                                                                    <span class="year">2018</span><span class="year">2019</span><span class="year old">2020</span></td></tr></tbody></table>
                                                </div></div><div class="datepicker dropdown-menu"><div class="datepicker-days" style="display: block; "><table class=" table-condensed">
                                                        <thead><tr><th class="prev"><i class="icon-arrow-left"></i></th><th colspan="5" class="switch">Fevereiro 2012</th><th class="next">
                                                                    <i class="icon-arrow-right"></i></th></tr><tr><th class="dow">Do</th><th class="dow">Sg</th><th class="dow">Te</th><th class="dow">Qa</th>
                                                                <th class="dow">Qi</th><th class="dow">Sx</th><th class="dow">Sa</th></tr></thead><tbody><tr><td class="day old">29</td><td class="day old">30</td>
                                                                <td class="day old">31</td><td class="day">1</td><td class="day">2</td><td class="day">3</td><td class="day">4</td></tr><tr><td class="day">5</td>
                                                                <td class="day">6</td><td class="day">7</td><td class="day">8</td><td class="day">9</td><td class="day">10</td><td class="day">11</td></tr><tr>
                                                                <td class="day">12</td><td class="day">13</td><td class="day">14</td><td class="day">15</td><td class="day">16</td><td class="day">17</td>
                                                                <td class="day">18</td></tr><tr><td class="day">19</td><td class="day active">20</td><td class="day">21</td><td class="day">22</td><td class="day">23</td>
                                                                <td class="day">24</td><td class="day">25</td></tr><tr><td class="day">26</td><td class="day">27</td><td class="day">28</td><td class="day">29</td>
                                                                <td class="day new">1</td><td class="day new">2</td><td class="day new">3</td></tr><tr><td class="day new">4</td><td class="day new">5</td>
                                                                <td class="day new">6</td><td class="day new">7</td><td class="day new">8</td><td class="day new">9</td><td class="day new">10</td></tr>
                                                        </tbody></table></div><div class="datepicker-months" style="display: none; "><table class="table-condensed"><thead><tr><th class="prev">
                                                                    <i class="icon-arrow-left"></i></th><th colspan="5" class="switch">2012</th><th class="next"><i class="icon-arrow-right"></i></th></tr>
                                                        </thead><tbody><tr><td colspan="7"><span class="month">Jan</span><span class="month active">Fev</span><span class="month">Mar</span>
                                                                    <span class="month">Abr</span><span class="month">Mai</span><span class="month">Jun</span><span class="month">Jul</span><span class="month">Ago</span>
                                                                    <span class="month">Set</span><span class="month">Out</span><span class="month">Nov</span><span class="month">Dez</span></td></tr></tbody></table>
                                                </div><div class="datepicker-years" style="display: none; "><table class="table-condensed"><thead><tr><th class="prev"><i class="icon-arrow-left">
                                                                    </i></th><th colspan="5" class="switch">2010-2019</th><th class="next"><i class="icon-arrow-right"></i></th></tr></thead><tbody><tr><td colspan="7">
                                                                    <span class="year old">2009</span><span class="year">2010</span><span class="year">2011</span><span class="year active">2012</span>
                                                                    <span class="year">2013</span><span class="year">2014</span><span class="year">2015</span><span class="year">2016</span><span class="year">2017</span>
                                                                    <span class="year">2018</span><span class="year">2019</span><span class="year old">2020</span></td></tr></tbody></table></div></div>
                                            <div class="datepicker dropdown-menu"><div class="datepicker-days" style="display: block; "><table class=" table-condensed"><thead>
                                                            <tr><th class="prev"><i class="icon-arrow-left"></i></th><th colspan="5" class="switch">Fevereiro 2012</th><th class="next">
                                                                    <i class="icon-arrow-right"></i></th></tr><tr><th class="dow">Do</th><th class="dow">Sg</th><th class="dow">Te</th><th class="dow">Qa</th>
                                                                <th class="dow">Qa</th><th class="dow">Sx</th><th class="dow">Sa</th></tr></thead><tbody><tr><td class="day old">29</td><td class="day old">30</td>
                                                                <td class="day old">31</td><td class="day">1</td><td class="day">2</td><td class="day">3</td><td class="day">4</td></tr><tr>
                                                                <td class="day">5</td><td class="day">6</td><td class="day">7</td><td class="day">8</td><td class="day">9</td><td class="day">10</td>
                                                                <td class="day">11</td></tr><tr><td class="day">12</td><td class="day">13</td><td class="day">14</td><td class="day">15</td><td class="day">16</td>
                                                                <td class="day">17</td><td class="day">18</td></tr><tr><td class="day">19</td><td class="day">20</td><td class="day">21</td><td class="day">22</td>
                                                                <td class="day">23</td><td class="day">24</td><td class="day active">25</td></tr><tr><td class="day">26</td><td class="day">27</td><td class="day">28</td>
                                                                <td class="day">29</td><td class="day new">1</td><td class="day new">2</td><td class="day new">3</td></tr><tr><td class="day new">4</td>
                                                                <td class="day new">5</td><td class="day new">6</td><td class="day new">7</td><td class="day new">8</td><td class="day new">9</td>
                                                                <td class="day new">10</td></tr></tbody></table></div><div class="datepicker-months" style="display: none; "><table class="table-condensed">
                                                        <thead><tr><th class="prev"><i class="icon-arrow-left"></i></th><th colspan="5" class="switch">2012</th><th class="next"><i class="icon-arrow-right">
                                                                    </i></th></tr></thead><tbody><tr><td colspan="7"><span class="month">Jan</span><span class="month active">Fev</span><span class="month">Mar</span>
                                                                    <span class="month">Abr</span><span class="month">Mai</span><span class="month">Jun</span><span class="month">Jul</span><span class="month">Ago</span>
                                                                    <span class="month">Set</span><span class="month">Out</span><span class="month">Nov</span><span class="month">Dez</span></td></tr></tbody></table>
                                                </div><div class="datepicker-years" style="display: none; "><table class="table-condensed"><thead><tr><th class="prev"><i class="icon-arrow-left">
                                                                    </i></th><th colspan="5" class="switch">2010-2019</th><th class="next"><i class="icon-arrow-right"></i></th></tr></thead><tbody><tr><td colspan="7">
                                                                    <span class="year old">2009</span><span class="year">2010</span><span class="year">2011</span><span class="year active">2012</span>
                                                                    <span class="year">2013</span><span class="year">2014</span><span class="year">2015</span><span class="year">2016</span><span class="year">2017</span>
                                                                    <span class="year">2018</span><span class="year">2019</span><span class="year old">2020</span></td></tr></tbody></table></div></div>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label class="control-label" for="destino">Cidade de Destino</label>
                                        <div class="controls">
                                            <input type="text" class="input-xlarge" id="cidade_destino" name="destino" rel="popover" data-content="Digite a cidade de destino." data-original-title="Cidade de Destino" placeholder="cidade de destino...">
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label class="control-label" for="input01">Classe do Serviço</label>
                                        <div class="controls">
                                            <select name="servico" id="servico" >
                                                <option value="1Classe">1ª Classe</option>
                                                <option value="Executiva">Executiva</option>
                                                <option value="Economica">Econômica</option>
                                            </select>
                                        </div>
                                    </div>
                                    <fieldset class="well" style="width: 400px; background-color: lightcyan" >
                                        <legend>Passageiros</legend>
                                        <div class="control-group">
                                            <label class="control-label" for="input01">Adultos (+ de 12 anos)</label>
                                            <div class="controls">
                                                <select name="adultos" id="adultos" >                                                    
                                                    <option value="1">1</option>
                                                    <option value="2">2</option>
                                                    <option value="3">3</option>
                                                    <option value="4">4</option>
                                                    <option value="5">5</option>
                                                    <option value="6">6</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="control-group">
                                            <label class="control-label" for="input01">Crianças (2 à 12 anos)</label>
                                            <div class="controls">
                                                <select name="criancas" id="criancas" >
                                                    <option value="0"> </option>
                                                    <option value="1">1</option>
                                                    <option value="2">2</option>
                                                    <option value="3">3</option>
                                                    <option value="4">4</option>
                                                    <option value="5">5</option>                                                   
                                                </select>
                                            </div>
                                        </div>
                                        <div class="control-group">
                                            <label class="control-label" for="input01">Bebês (0 à 23 meses)</label>
                                            <div class="controls">
                                                <select name="bebes" id="bebes" >
                                                    <option value="0"> </option>
                                                    <option value="1">1</option>
                                                    <option value="2">2</option>
                                                    <option value="3">3</option>
                                                    <option value="4">4</option>
                                                    <option value="5">5</option>                                                    
                                                </select>
                                            </div>
                                        </div>
                                        <div class="control-group">
                                            <label class="control-label" for="input01"></label>
                                            <div class="controls">
                                                <button type="submit" class="btn btn-success">Comprar</button> &nbsp;&nbsp;
                                                <button type="reset" class="btn btn-danger">Limpar</button>
                                            </div>
                                        </div>
                                    </fieldset>
                                </fieldset>
                            </form>
                        </div>

                    </div>
                </div>

            </div></div>
        <!-- </div><!--/row-->
        <!--</div><!--/span-->
        <!--</div><!--/row-->
        <hr>
    <footer>
        <div class="container">
            <p>&copy; VoeFacil</p>
        </div>
    </footer>
    <!--</div><!--/.fluid-container-->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="resources/javascript/jquery.js"></script>
    <script src="resources/javascript/bootstrap-transition.js"></script>
    <script src="resources/javascript/bootstrap-alert.js"></script>
    <script src="resources/javascript/bootstrap-modal.js"></script>
    <script src="resources/javascript/bootstrap-dropdown.js"></script>
    <script src="resources/javascript/bootstrap-scrollspy.js"></script>
    <script src="resources/javascript/bootstrap-datepicker.js"></script>
    <script src="resources/javascript/bootstrap-tab.js"></script>
    <script src="resources/javascript/bootstrap-tooltip.js"></script>
    <script src="resources/javascript/MascaraValidacao.js"></script>
    <script src="resources/javascript/bootstrap-popover.js"></script>
    <script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#registerHere input').hover(function()
            {
                $(this).popover('show')
            });
            $("#registerHere").validate({
                rules:{
                    user_name:"required",
                    user_email:{
                        required:true,
                        email: true
                    },
                    pwd:{
                        required:true,
                        minlength: 6
                    },
                    cpwd:{
                        required:true,
                        equalTo: "#pwd"
                    },
                    gender:"required"
                },
                messages:{
                    user_name:"Enter your first and last name",
                    user_email:{
                        required:"Enter your email address",
                        email:"Enter valid email address"
                    },
                    pwd:{
                        required:"Enter your password",
                        minlength:"Password must be minimum 6 characters"
                    },
                    cpwd:{
                        required:"Enter confirm password",
                        equalTo:"Password and Confirm Password must match"
                    },
                    gender:"Select Gender"
                },
                errorClass: "help-inline",
                errorElement: "span",
                highlight:function(element, errorClass, validClass) {
                    $(element).parents('.control-group').addClass('error');
                },
                unhighlight: function(element, errorClass, validClass) {
                    $(element).parents('.control-group').removeClass('error');
                    $(element).parents('.control-group').addClass('success');
                }
            });
        });
    </script>
</body>
</html>
